// resolve 用来拼接绝对路径的方法
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

const htmlWebpackPlugin = new HtmlWebpackPlugin({
    template: './src/index.html',
    minify: {
        collapseWhitespace: true,
        removeComments: true,
    }
});
const myEnv = 'production';
// 对 node 环境的配置
process.env.NODE_ENV = myEnv;
const webPackConfig = {
    entry: './src/js/index.js',  // 单入口--常用于单页面
    output: {
        filename: 'js/[name].build.[contenthash:10].js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                oneOf: [

                ]
            }
        ]
    },
    plugins: [
        htmlWebpackPlugin, 
    ],

    optimization:{
        splitChunks:{
            chunks:'all'
        }
    },
    // mode: 'development', // 开发模式
    mode: 'production', // 生产模式  会自动压缩js代码
}

module.exports = webPackConfig

// npm i postcss-loader

/**
 * tree shaking 树摇  去除无用的代码
 *  前提    
 *          1.必须使用es6模块化 
 *          2.开启production环境
 *  packjson.json 配置中
 *      【"sideEffects": false】 配置表示所有代码都没有副作用，都可以进行 tree shaking，如果这样配置了，会将import入的css给删掉，如果不想出现这样的话可以配置为  【"sideEffects": ["*.css","*.less"]】
 */